<template>
	<div class="chatview">
		<div ref="_echarts" class="echarts"></div>
	</div>
</template>

<script setup>
    import { reactive, getCurrentInstance, onMounted, watch } from 'vue'
	import * as echarts from 'echarts/core';
	import { GridComponent } from 'echarts/components';
	import { BarChart } from 'echarts/charts';
	import { CanvasRenderer } from 'echarts/renderers';
    let { proxy } = getCurrentInstance()

	echarts.use([GridComponent, BarChart, CanvasRenderer]);
	
	const props = defineProps({
		data: { type: Object, default:0 },
		title: { type: String, default: "" },
		subtext: { type: String, default: "" },
		top: { type: Number, default: 8 },
		left: { type: Number, default: 10 },
		right: { type: Number, default: 5 },
		bottom: { type: Number, default: 15 },
	})
	
	let obj = reactive({
		// myChart: null,
		option: {
			title: {},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				top: props.top+'%',
				left: props.left+'%',
				right: props.right+'%',
				bottom: props.bottom+'%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: [],
				axisTick: { alignWithLabel: true }
			}],
			yAxis: [{ type: 'value' }],
			series: [{
				name: "Direct",
				type: 'bar',
				barWidth: '60%',
				label: { show: true, position: "top" },
				data: [],
			}]
		}
	})

	watch(
		() => [props.data],
		(a, b) => {
			if (props.text!="") obj.option.title.text = props.text
			if (props.subtext!="") obj.option.title.subtext = props.subtext
			obj.option.xAxis[0].data = props.data.x
			obj.option.series[0].data = props.data.y
			// obj.option.grid.left = a[1] + '%'
			const tmp = echarts.init(proxy.$refs["_echarts"]);
			tmp.setOption(obj.option);
		}
	)
	
	onMounted(() => {
		// const tmp = proxy.$echarts.init(proxy.$refs["echarts"]);
		// tmp.setOption(obj.option); //接口写好，这里就不要了
		// obj.myChart = tmp;
	})
</script>

<style scoped lang="scss">
	@import "@/assets/echats.scss";
</style>